<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <script src="/static/js/jquery-2.2.4.js"></script>
    <script src="static/bootstrap-table/bootstrap-table.js"></script>
    <!--
    官方例子
    https://examples.bootstrap-table.com/#view-source
    -->
    <script>
        $(function(){

            $("#tbItemTable").bootstrapTable({
                url:"/findByPage",
                pagination:true,//分页
                sidePagination: 'server',//服务端分页   默认："client" 客户端分页
                search:true, //搜索框
                toolbar:"#toolbar",//工具条
                columns:[[
                    // [{"title":"小米手机"}]
                    //field: 服务端响应回来的json的key一致
                    //title:列的标题
                    // sortable:true  按照该字段排序
                    {checkbox:true},//复选框
                    {field:"id",title:"商品编号",sortable:true},
                    {field:"title",title:"商品名称"},
                    {field:"sellPoint",title:"卖点"},
                    {field:"price",title:"价格",sortable:true}
                ]]
            });

            $("#updateBtn").click(function(){
                    //$table.bootstrapTable('getSelections').
               var rows =  $("#tbItemTable").bootstrapTable("getSelections");
               if(rows.length>1||rows.length<1){
                   alert('请选择一条记录进行修改');
                   return;
               }

               $("#showList").hide();
               $("#updateDiv").show();

              //console.log( rows[0].id);
                $("#id").val(rows[0].id);
                $("#title").val(rows[0].title);
                $("#sellPoint").val(rows[0].sellPoint);
                $("#price").val(rows[0].price);



            });

            //提交
            $("#btn").click(function(){
                //新增、修改通用
                var url = $("#id").val()==null||$("#id").val()==0?"/addTbItem":"/updateItem";
                $.ajax({
                    url:url,
                    data:$("#myForm").serializeArray(),
                    dataType:"json",
                    success:function(r){
                        if(r.code==0){
                            alert('修改成功');
                            $("#showList").show();
                            $("#updateDiv").hide();
                            $("#tbItemTable").bootstrapTable("refresh");
                        }
                    }
                });
            });

            $("#deleteBtn").click(function(){
                if(confirm('是否删除?')){
                    //得到选中的行  返回的是数组
                    var rows =  $("#tbItemTable").bootstrapTable("getSelections");
                    if (rows.length<1){
                        alert('您还没选中任何记录');
                        return;
                    }
                    var ids = new Array();
                    console.log(rows.length);
                    for(var i = 0;i<rows.length; i++){
                        //console.log(rows[i]);
                        //push  添加到数组中
                        ids.push(rows[i].id);//rows[i].id取出该行的id值
                    }
                    //console.log(ids)
                    // $.ajax({
                    //     url:"/deleteBatch?ids="+ids,
                    //     //type:"post",
                    //    // url:"/deleteBatch1",
                    //     dataType:"json",
                    //    // data:JSON.stringify(ids),
                    //     //contentType:"application/json",//前端传服务端的数据是json格式
                    //     success:function(r){
                    //         if(r.code==0){
                    //             alert(r.msg);
                    //             $("#tbItemTable").bootstrapTable("refresh");
                    //         }
                    //     }
                    // })

                    $.ajax({
                        url:"/deleteBatch1",//  @RequestBody
                        type:"post",
                        dataType:"json",
                        data:JSON.stringify(ids),
                        contentType:"application/json",//前端传服务端的数据是json格式
                        success:function(r){
                            if(r.code==0){
                                alert(r.msg);
                                $("#tbItemTable").bootstrapTable("refresh");
                            }
                        }
                    })

                }

            });

            //新增
            $("#addBtn").click(function(){
                $("#showList").hide();
                $("#updateDiv").show();
                $("#id").val("");
                $("#title").val("");
                $("#sellPoint").val("");
                $("#price").val("");

            });

        });


    </script>

</head>
<body>
    <div id="showList">
    <div id="toolbar">
        <button class="btn btn-success" id="addBtn">新增</button>
        <button class="btn btn-primary" id="updateBtn">修改</button>
        <button class="btn btn-danger" id="deleteBtn">删除</button>
    </div>
    <table id="tbItemTable">
    </table>
    </div>

    <div style="display: none;" id="updateDiv">
        <form id="myForm">
            <div>
                <label>
                    商品ID
                </label>
                <input id="id" type="text" name="id" class="form-control" readonly>
            </div>
            <div>
                <label>
                    商品名字
                </label>
                <input id="title" type="text" name="title" class="form-control">
            </div>
            <div>
                <label>
                    商品卖点
                </label>
                <input type="text" id="sellPoint" name="sellPoint" class="form-control">
            </div>
            <div>
                <label>
                    价格
                </label>
                <input type="text" id="price" name="price" class="form-control">
            </div>

            <div>
                <input type="button" class="btn-success" id="btn" value="提交"/>
            </div>
        </form>
    </div>
</body>
</html>